<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <script src="jQuery/jquery-3.1.1.js"></script>
    <title></title>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .container {
            width: 768px;
            border: 1px solid #ccc;
        }
        
        li {
            border-bottom: 1px dashed #dfdfdf;
            font-size: 16px;
            overflow: hidden;
            line-height: 25px;
        }
        
        li:last-child {
            border: none;
        }
        
        .name {
            float: left;
            width: 100px;
            height: 25px;
            text-align: right;
            line-height: 25px;
        }
        
        .intro {
            float: left;
            width: 668px;
        }
        
        a {
            text-decoration: none;
            display: inline-block;
            padding: 0 5px;
            margin: 0 5px;
        }
        
        .selected,
        a:hover {
            background-color: #f63;
            color: white;
        }
        
        li {
            padding: 5px 0;
        }
        
        li.choose .intro span {
            border: 1px solid #f63;
            padding: 5px;
            /*margin: 10px;*/
            cursor: pointer;
            display: none;
        }
        
        li.choose .intro span em {
            font-style: normal;
            color: #ccc;
        }
        
        li.choose .intro span:hover em {
            color: #f63;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <span class="name">品牌:</span>
                <span class="intro">
                <a href="javascript:;">苹果</a>
                <a href="javascript:;">小米</a>
                <a href="javascript:;">华为</a>
                <a href="javascript:;">联想</a>
                <a href="javascript:;">中兴</a>
                <a href="javascript:;">三星</a>
                <a href="javascript:;">魅族</a>
                <a href="javascript:;">酷派</a>
                <a href="javascript:;">诺基亚</a>
                <a href="javascript:;">苹果</a>
                <a href="javascript:;">小米</a>
                <a href="javascript:;">华为</a>
                <a href="javascript:;">联想</a>
                <a href="javascript:;">中兴</a>
                <a href="javascript:;">三星</a>
                <a href="javascript:;">魅族</a>
                <a href="javascript:;">酷派</a>
                <a href="javascript:;">诺基亚</a>
                <a href="javascript:;">苹果</a>
                <a href="javascript:;">小米</a>
                <a href="javascript:;">华为</a>
                <a href="javascript:;">联想</a>
                <a href="javascript:;">中兴</a>
                <a href="javascript:;">三星</a>
                <a href="javascript:;">魅族</a>
                <a href="javascript:;">酷派</a>
                <a href="javascript:;">诺基亚</a>
                </span>
            </li>
            <li>
                <span class="name">价格:</span>
                <span class="intro">
                <a href="javascript:;">500元以下</a>
                <a href="javascript:;">500-1000元</a>
                <a href="javascript:;">1000-1500元</a>
                <a href="javascript:;">1500-2000元</a>
                <a href="javascript:;">2000-3000元</a>
                <a href="javascript:;">3000-4000元</a>
                <a href="javascript:;">4000元以上</a>
                </span>
            </li>
            <li>
                <span class="name">主屏尺寸:</span>
                <span class="intro">
                <a href="javascript:;">6.0英寸以上</a>
                <a href="javascript:;">5.5-6.0英寸</a>
                <a href="javascript:;">5.0-5.5英寸</a>
                <a href="javascript:;">4.5-5.0英寸</a>
                <a href="javascript:;">4.0-4.5英寸</a>
                <a href="javascript:;">4.0英寸以下</a>
                </span>
            </li>
            <li>
                <span class="name">网络:</span>
                <span class="intro">
                <a href="javascript:;">全网通</a>
                <a href="javascript:;">双4G</a>
                <a href="javascript:;">移动4G</a>
                <a href="javascript:;">联通4G</a>
                <a href="javascript:;">电信4G</a>
                </span>
            </li>
            <li>
                <span class="name">核心数:</span>
                <span class="intro">
                <a href="javascript:;">十核</a>
                <a href="javascript:;">八核</a>
                <a href="javascript:;">双四核</a>
                <a href="javascript:;">四核</a>
                <a href="javascript:;">电信4G</a>
                </span>
            </li>
            <li>
                <span class="name">特性:</span>
                <span class="intro">
                <a href="javascript:;">大屏幕</a>
                <a href="javascript:;">双卡双待</a>
                <a href="javascript:;">指纹识别</a>
                <a href="javascript:;">千元机</a>
                <a href="javascript:;">拍照神器</a>
                </span>
            </li>
            <li class="choose">
                <span class="name">已选择:</span>
                <span class="intro">
                    <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </span>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    $('li .intro a').click(function () {
        // 给选中的a标签添加类名 未选中的移除类名
        $(this).addClass('selected').siblings().removeClass('selected')
        // 获取被选中的a标签所在行li的索引值
        var li_index = $(this).parents('li').index();
        // 获取选中的a标签的内容、
        var text = $(this).text() + '<em>&times;</em>';
        // 吧对应行即li标签内的a标签的内容插入到对应的span标签内
        // 这样写同时解决两个问题 修改选项同步 每个li对应一个span
        $('.choose .intro span').eq(li_index).html(text).css('display', 'inline-block');

        /*点击已选择的span关闭*/
        $('.choose .intro span').click(function () {
            // 移除把对应行的所有《a》
            var index = $(this).index();
            $('li').not('.choose').eq(index).find('.intro a').removeClass('selected')
            // 清空所有的span的内容 并隐藏
            $(this).empty().hide();

            var length = $('.choose .intro span').not(':empty').length
            console.log(length);

                clearall();

        })

        clearall();

        function clearall() {
            $('#clear').remove();
            // 获取已经选中的选项的个数
            var length = $('.choose .intro span').not(':empty').length
            // console.log(length);
            if (length > 0) {
                var clear = '<a href="javascript:;" id="clear" class="clear">清空</a>'
                $('.choose .intro').append(clear);
            }
            // 点击清空按钮，清除所有的选项
            $('#clear').click(function(){
                // 清空选项
                $('.choose .intro span').html('').hide();
                // 清空所有a标签的样式
                $('li').not('.choose').find('.intro a').removeClass('selected');
                // 移除自身
                $(this).remove()
            })
        }
    })

</script>